import React from "react";
import { Chart, Tooltip, Geom } from "bizcharts";
import autoHeight from "../autoHeight";
import styles from "../index.less";

@autoHeight()
class MiniBar extends React.Component {
  render() {
    const { height, forceFit = true, color = "#1890FF", data = [] } = this.props;

    const scale = {
      x: {
        type: "cat"
      },
      y: {
        min: 0
      }
    };

    const padding = [30, 5, 5, 5];

    const tooltip = [
      "x*y",
      (x, y) => ({
        name: x,
        value: y
      })
    ];

    return (
      <div className={styles.miniChart} style={{ height }}>
        <div className={styles.chartContent}>
          <Chart scale={scale} height={80} forceFit={forceFit} data={data} padding={padding}>
            {/* <Tooltip showTitle={false} crosshairs={false} /> */}
            <Geom type="interval" position="x*y" color={color} tooltip={tooltip} />
          </Chart>
        </div>
      </div>
    );
  }
}
export default MiniBar;
